<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .static {
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            font-size: 24px;
            color: darkmagenta;
            font-weight: bold;
            margin: 10px;
        }

        .a {
            border: 3px solid darkolivegreen;
        }

        .b {
            background: deeppink;
        }

        .c {
            border-radius: 50%;
        }

        .main {
            margin: 20px;
        }

        .nav {
            display: flex;
        }

        .nav-item {
            width: 100px;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            color: yellowgreen;
            background: palevioletred;
            border-radius: 10px;
            font-size: 14px;
            margin: 10px;
            text-align: center;
        }

        .nav-active {
            background: crimson;
            color: #fff;
        }

        .content-item {
            width: 350px;
            height: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 34px;
            background: crimson;
            color: cyan;
            border-radius: 20px;
            margin: 10px;
        }

        td {
            text-align: center;
            border: 1px solid #eee;
            width: 80px;
        }

        table td {
            width: 90px;
        }
    </style>

</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>商品名称</td>
                    <td>商品图片</td>
                    <td>商品单价</td>
                    <td>商品数量</td>
                    <td>商品总计</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody>
                <template v-if="goods.length>0">
                    <tr v-for="(l,i) in goods" :key="i">
                        <td>{{i+1}}</td>
                        <td><input type="checkbox" v-model="l.check" name="" id=""></td>
                        <td>{{l.title}}</td>
                        <td><img width="90" height="40" src="../1.jpg   " alt=""></td>
                        <td>{{l.price}}</td>
                        <td>
                            <input min="1" type="number" v-model.number="l.count">
                        </td>
                        <td>
                            {{l.price*l.count}}
                        </td>
                        <td>
                            <button @click="goods.splice(i,1)">删除</button>
                        </td>
                    </tr>
                </template>
                <tr v-else>
                    <td colspan="8" style="text-align: center;">暂无数据,请去添加 </td>
                </tr>
            </tbody>
        </table>
        <div>
            <p> <label for="quan">
                    <input type="checkbox" id="quan" v-model="quan"> 全选反选
                </label></p>
        </div>
        <button @click="dalCheck">删除选中</button>
        <p>选中总金额：{{checkAmount}} / 选中数量{{checkTotal}}</p>
        <p>
            总计: {{camount}} / 总数量 {{ total}} {{ctotal}}
        </p>
        <p>
            <button>结算</button>
        </p>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            title: "购物车",
            goods: [
                { check: false, title: "上衣", price: 200, count: 10 },
                { check: true, title: "裤子", price: 100, count: 10 },
                { check: false, title: "鞋子", price: 500, count: 10 },
                { check: false, title: "风衣", price: 1000, count: 10 },
                { check: true, title: "帽子", price: 300, count: 10 },
                { check: true, title: "西服", price: 2000, count: 10 },
            ],
            total: 0,  // 总数量
            checkTotal: 0, // 选中数量
            amount: 0, // 总价
            checkAmount: 0 // 选中总价 
        },
        watch: {
            // // 浅度监听 
            // goods(v){
            //   console.log(v)
            // }
            // 深度监听  监听每一层的数据修改  监听所有的数据修改 
            goods: {
                deep: true,
                handler(v) {
                    console.log(v); // 新的goods 
                    this.total = 0
                    this.amount = 0
                    this.checkTotal = 0
                    this.checkAmount = 0
                    v.forEach(item => {
                        this.total += item.count;
                        this.amount += item.count * item.price
                        if (item.check) {
                            this.checkTotal += item.count
                            this.checkAmount += item.count * item.price;
                        }
                    })
                }

            }
        },
        computed: {
            // 总数量
            ctotal() {
                var total = 0;
                this.goods.forEach((item => {
                    total += item.count
                }))
            },
            // 总价值
            camount() {

                return this.goods.reduce((total, amount) => {
                    return total + amount.count * amount.price
                }, 0)
                // return this.goods.reduce()
            },
            quan: {
                get() {
                    return this.goods.every(item => item.check)
                },
                set(v) {
                    console.log(v);
                    this.goods = this.goods.map(item => {
                        item.check = v
                        return item
                    })
                }

            }
        },
        methods: {
            dalCheck() {
                this.goods = this.goods.filter(item => !item.check)  // true 留下来
            }
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
            this.goods.forEach(item => {
                this.total += item.count
                this.amount += item.count * item.price
                if (item.check) {
                    this.checkTotal += item.count
                    this.checkAmount += item.count * item.price
                }
            })
        }
    }).$mount("#app")
</script>

</html>